<template>
  <div>
    <el-dialog
      v-model="state.centerDialogVisible"
      :title="(state.type ? '编辑' : '添加') + '填写记录'"
      width="50%"
      align-center
      @open="openHandler"
      @close="handleClose"
      class="dialogStyle"
    >
      <el-form
        ref="formRef"
        :model="formInline"
        :rules="rules"
        class="demo-form-inline"
        label-width="200px"
      >
        <el-form-item label="项目" prop="projectId">
          <el-select
            v-model="formInline.projectId"
            value-key=""
            placeholder=""
            clearable
            @change="changeDepartment"
          >
            <el-option
              v-for="item in state.projectOptions"
              :key="item.projectId"
              :label="item.projectName"
              :value="item.projectId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="工作中存在的卡点及问题"
          class="oneline"
          prop="problemDescription"
        >
          <el-input
            v-model="formInline.problemDescription"
            show-word-limit
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item
          label="亟需支撑协调事项"
          class="oneline"
          prop="requireDescription"
        >
          <el-input
            v-model="formInline.requireDescription"
            show-word-limit
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.centerDialogVisible = false" class="button_cancel2">取消</el-button>
          <el-button @click="submitHandler" class="button_view"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>

import upload from '@/components/uploadCom/upload.vue'
import { ref, reactive, onMounted } from 'vue'
import { taskSupervise, projectListApi, department } from '@/api/project'
import { weeklyApi } from '@/api/project'

import { ElDialog, ElForm, ElMessage, ElFormItem } from 'element-plus'

const formInline = reactive({})
const state = reactive({
  type: 0,
  projectTaskId: '',
  departmentWeeklyId: '',
  centerDialogVisible: false,
  projectRow: {},
  userOptions: [],
  departmentOptions: []
})
const rules = {
  auditDepartmentId: [
    { required: true, message: '请选择单位/部门', trigger: 'blur' }
  ],
  auditUserId: [{ required: true, message: '请输入员工', trigger: 'blur' }],
  projectId: [{ required: true, message: '请输入项目', trigger: 'blur' }],
  problemDescription: [
    { required: true, message: '请输入工作中存在的卡点及问题', trigger: 'blur' }
  ],
  requireDescription: [
    { required: true, message: '请输入亟需支撑协调事项', trigger: 'blur' }
  ]
}
//弹框打开前的回调
const openHandler = () => {
  if (state.type) {
    for (const key in state.projectRow) {
      formInline[key] = state.projectRow[key] || ''
    }
  }
}
const emits = defineEmits(['refreshList'])
//弹框关闭
const handleClose = () => {
  for (const key in formInline) {
    formInline[key] = ''
  }
  emits('refreshList')
}

//获取所有项目信息
const projectListApiHandler = () => {
     projectListApi.getProjectsByType({type:1}).then((res) => {
    const { code, data, msg } = res
    if (code == 200) {
      state.projectOptions = data
    }
  })
}

const formRef = ref(null)
//周报填写记录新增
// departmentWeeklyId

const submitHandler = () => {
  formRef.value.validate((valid, fields) => {
    if (valid) {
      if (state.type) {
        weeklyApi
        .updateWeeklyWrite({
            type:2,
          departmentWeeklyId: state.departmentWeeklyId,
          ...formInline
        })
        .then((res) => {
          if (res.code === '200') {
            state.centerDialogVisible = false
            ElMessage.success('填写成功')

            emits('refreshList')
          }
        })
      }

      if (!state.type)  {
        weeklyApi
          .createWeeklyWrite({
              type:2,
            departmentWeeklyId: state.departmentWeeklyId,
            ...formInline
          })
          .then((res) => {
            if (res.code === '200') {
              state.centerDialogVisible = false
              ElMessage.success('填写成功')
              emits('refreshList')
            }
          })
      }
    }
  })
}
defineExpose({
  state
})
onMounted(() => {
  //获取所有项目
  projectListApiHandler()
})
</script>
<style lang="scss" scoped>
@import '@/views/constructionProjectManage/static/dialog.scss';
</style>
